import { Tabs } from 'nextra/components';
import { Widget } from '@/components/demo/widget.tsx';
import LinkBadge from '@/components/ui/link-badge/link-badge.tsx';
import LinkBadgeGroup from '@/components/ui/link-badge/link-badge-group.tsx';

# Circular Progress

Displays an indeterminate circular indicator showing the completion progress of a task.

<LinkBadgeGroup>
    <LinkBadge label="API Reference" href="https://pub.dev/documentation/forui/latest/forui.widgets.progress/"/>
</LinkBadgeGroup>

<Tabs items={['Preview', 'Code']}>
  <Tabs.Tab>
    <Widget name='progress' variant='circular'/>
  </Tabs.Tab>
  <Tabs.Tab>
    ```dart copy
    class CircularProgress extends StatelessWidget {
      @override
      Widget build(BuildContext context) => const Row(
        mainAxisAlignment: MainAxisAlignment.center,
        spacing: 25,
        children: [
          FCircularProgress(),
          FCircularProgress.loader(),
          FCircularProgress.pinwheel(),
        ],
      );
    }
    ```
  </Tabs.Tab>
</Tabs>

## CLI

To generate and customize this style:

```shell copy
dart run forui style create circular-progress
```

## Usage

### `FCircularProgress(...)`

```dart copy
FCircularProgress(
  style: FCircularProgressStyle(...),
  semanticsLabel: 'Label',
  icon: FIcons.loaderCircle,
);
```

### `FCircularProgress.loader(...)`

```dart copy
FCircularProgress.loader(
  style: FCircularProgressStyle(...),
  semanticsLabel: 'Label',
);
```

### `FCircularProgress.pinwheel(...)`

```dart copy
FCircularProgress.pinwheel(
  style: FCircularProgressStyle(...),
  semanticsLabel: 'Label',
);
```
